<template>
  <div class="individualCenter">
    <div class="main">
      <div class="col_tab">
        <div class="tab_box">
          <div class="title">
            <div class="img_box">
              <img :src="info.imagesUrl" width="100%" alt="" />
              <div class="mod">
                <span @click="dialogVisible = true">点击修改</span>
              </div>
            </div>
            <div class="name">
              {{ info.userName }}
            </div>
          </div>
          <ul>
            <li
              v-for="(e, i) in tab"
              :key="i"
              @click="isIndex = i"
              :class="isIndex == i ? 'is_active' : ''"
            >
              <i>
                {{ i + 1 }}
              </i>
              <span>
                {{ e }}
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="col_content msg_box" v-show="isIndex == 0">
        <div class="img_kong" v-if="msgData.length == 0">
          <img
            src="http://175.178.92.128:8087/campus_help_system/images/kong.png"
            alt=""
          />
          <div class="test_kong">暂无数据</div>
        </div>

        <div class="msg_main" v-for="(e, i) in msgData" :key="i">
          <div class="me_msg">
            <span>我的留言：</span>
            <div class="text">
              {{ e.message }}
            </div>
            <div class="time">
              {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </div>
          <div class="admin_msg" v-if="e.adminMessage">
            <span>管理员回复：</span>
            <div class="text">
              {{ e.adminMessage }}
            </div>
            <div class="time">
              {{ $moment(parseInt(e.updatedAt)).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </div>
        </div>
      </div>
      <div class="col_content help_box" v-show="isIndex == 1">
        <ul class="tab_help">
          <li v-for="(e, i) in tab_help" :key="i" @click="clickTabHelp(e, i)">
            {{ e }}
            <i v-show="i == isHelpIndex"></i>
          </li>
        </ul>

        <div
          class="help_main"
          v-for="(e, i) in tab_help"
          :key="i"
          v-show="isHelpIndex == i"
        >
          <ul>
            <li
              v-for="(eA, iA) in goodsHelpData"
              :key="iA"
              @click="$router.push('/mutual_aid/details/' + eA.id)"
            >
              <div class="img_box">
                <img :src="eA.describeImgUrl" width="100%" alt="" />
              </div>
              <div class="text_box">
                <div class="help_title">
                  <span>
                    {{ eA.goodsName }}
                  </span>
                  <el-tag size="mini" v-show="eA.checked == 0">待审核</el-tag>
                  <el-tag
                    size="mini"
                    type="warning"
                    v-show="eA.checked == 1 && !eA.userId"
                  >
                    已审核
                  </el-tag>
                  <el-tag
                    size="mini"
                    type="success"
                    v-show="eA.checked == 1 && eA.userId"
                  >
                    已完成
                  </el-tag>
                  <el-tag size="mini" type="warning" v-show="eA.checked == -1">
                    已拒绝
                  </el-tag>
                </div>
                <div class="help_content">
                  {{ eA.describeText }}
                </div>
              </div>
              <div class="name_box" v-if="isHelpIndex == 1 && eA.userId">
                <div class="help_name">互助人:{{ eA.users.userName }}</div>
                <div class="help_tel">电话:{{ eA.users.telephone }}</div>
                <div class="help_time">
                  时间:{{
                    $moment(parseInt(eA.createdAt)).format("YYYY-MM-DD")
                  }}
                </div>
              </div>
              <div class="name_box" v-else>
                <div class="help_name">帮助人:{{ eA.createdBy }}</div>
                <div class="help_tel">电话:{{ eA.telephone }}</div>
                <div class="help_time">
                  时间:{{
                    $moment(parseInt(eA.createdAt)).format("YYYY-MM-DD")
                  }}
                </div>
              </div>
            </li>
          </ul>

          <div class="img_kong" v-if="goodsHelpData.length == 0">
            <img
              src="http://175.178.92.128:8087/campus_help_system/images/kong.png"
              alt=""
            />
            <div class="test_kong">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="col_content lost_box" v-show="isIndex == 2">
        <div class="lost_title">我发布的:</div>
        <div class="lost_content">
          <ul>
            <li
              v-for="(e, i) in lostFoundData"
              :key="i"
              @click="$router.push('/lost_and_found/details/' + e.id)"
            >
              <div class="img_box">
                <img :src="e.describedImgUrl" width="100%" alt="" />
              </div>
              <div class="text_box">
                <div class="help_title">
                  {{ e.goodsName }}

                  <el-tag v-if="e.checked == 0">待审核</el-tag>
                  <el-tag type="success" v-if="e.checked == 1">审核通过</el-tag>
                  <el-tag type="danger" v-if="e.checked == -1">
                    审核不通过
                  </el-tag>
                  <el-tag type="warning" v-if="e.checked == 2">已认领</el-tag>
                </div>
                <div class="help_content">
                  {{ e.describedText }}
                </div>
              </div>
              <div class="name_box">
                <div class="help_name">{{ e.createdBy }}</div>
                <div class="help_tel">
                  {{ e.telephone }}
                </div>
                <div class="help_time">
                  {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD") }}
                </div>
              </div>
            </li>
          </ul>

          <div class="img_kong" v-if="lostFoundData.length == 0">
            <img
              src="http://175.178.92.128:8087/campus_help_system/images/kong.png"
              alt=""
            />
            <div class="test_kong">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="col_content learn_box" v-show="isIndex == 3">
        <div class="learn_title">我发布的资源:</div>
        <div class="learn_content">
          <ul>
            <li
              v-for="(e, i) in learnDatumData"
              :key="i"
              @click="$router.push('/resource_sharing/details/' + e.id)"
            >
              <div class="text_box">
                <div class="help_title">
                  {{ e.title }}
                  <el-tag size="mini" v-if="e.checked == 0">待审核</el-tag>
                  <el-tag size="mini" type="success" v-if="e.checked == 1"
                    >通过</el-tag
                  >
                  <el-tag size="mini" type="danger" v-if="e.checked == -1"
                    >不通过</el-tag
                  >
                </div>
              </div>
              <div class="name_box">
                <div class="help_name">作者：{{ e.createdBy }}</div>
                <div class="help_time">
                  发布时间:{{
                    $moment(parseInt(e.createdAt)).format("YYYY-MM-DD")
                  }}
                </div>
              </div>
            </li>
          </ul>

          <div class="img_kong" v-if="learnDatumData.length == 0">
            <img
              src="http://175.178.92.128:8087/campus_help_system/images/kong.png"
              alt=""
            />
            <div class="test_kong">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="col_content errand_box" v-show="isIndex == 4">
        <ul class="tab_errand">
          <li
            v-for="(e, i) in tab_lost_found"
            :key="i"
            @click="clickTabLostFound(e, i)"
          >
            {{ e }}
            <i v-show="i == isLostFoundIndex"></i>
          </li>
        </ul>

        <div class="errand_main">
          <ul>
            <li v-for="(eA, iA) in errandData" :key="iA">
              <div class="col_title">
                <span>
                  {{ eA.goodsName }}
                </span>
                <i></i>
              </div>
              <div class="name_time_tel">
                <span> 奖励：{{ eA.prices }} </span>
                <span> 发布人：{{ eA.createdBy }} </span>
                <span> 手机号：{{ eA.telephone }} </span>
                <span>
                  发布时间：
                  {{
                    $moment(parseInt(eA.createdAt)).format(
                      "YYYY-MM-DD HH:mm:ss"
                    )
                  }}
                </span>
                <span>
                  <el-tag v-if="eA.status == 0">待接单</el-tag>
                  <el-tag type="success" v-if="eA.status == 1">已接单</el-tag>
                  <el-tag type="warning" v-if="eA.status == 2">已解决</el-tag>
                </span>
              </div>
              <div class="col_content">
                {{ eA.goodsContent }}
              </div>
              <div class="btn" v-if="isLostFoundIndex == 1 && eA.status != 2">
                <el-button type="primary" round @click="clickSubmitTask(eA)">
                  完成帮啦任务
                </el-button>
              </div>
            </li>
          </ul>

          <div class="img_kong" v-if="errandData.length == 0">
            <img
              src="http://175.178.92.128:8087/campus_help_system/images/kong.png"
              alt=""
            />
            <div class="test_kong">暂无数据</div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="修改信息" :visible.sync="dialogVisible" width="576px">
      <div class="dia_box">
        <el-form ref="form" :model="info" label-width="100px">
          <el-form-item label="照片：">
            <el-upload
              class="upload-demo"
              drag
              :show-file-list="false"
              action="#"
              :http-request="imgUpload"
              :on-success="handleAvatarSuccess"
            >
              <div v-if="info.imagesUrl == ''">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">点击上传</div>
              </div>
              <div
                v-if="info.imagesUrl != ''"
                style="width: 100%; height: 100%"
              >
                <img :src="info.imagesUrl" alt="" height="100%" width="100%" />
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="学号：">
            <el-input v-model="info.userNo"></el-input>
          </el-form-item>
          <el-form-item label="学生名字：">
            <el-input v-model="info.userName"></el-input>
          </el-form-item>
          <el-form-item label="专业：">
            <el-input v-model="info.professional"></el-input>
          </el-form-item>
          <el-form-item label="班级：">
            <el-input v-model="info.classes"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input show-password v-model="info.password"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getGoodsHelpEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { uploadImageUser, getGoodsHelpEdit } from "@/util/users.js";
import { getMessageList } from "@/util/message.js";
import { getGoodsHelpList } from "@/util/goodsHelp.js";
import { getLostFoundList } from "@/util/lostFound.js";
import { getLearnDatumList } from "@/util/learnDatum.js";
import { getErrandList, getErrandEdit } from "@/util/errand.js";

export default {
  data() {
    return {
      tab: ["留言记录", "互助物品", "失物招领", "资源共享", "帮啦信息"],
      tab_help: ["帮助的", "发布的"],
      tab_lost_found: ["发布的任务", "接受的任务"],

      isIndex: 0,
      isHelpIndex: 0,
      isLostFoundIndex: 0,
      info: {
        imagesUrl: "",
        userName: "",
        classes: "",
        userNo: "",
        role: "",
        id: "",
        password: "",
        telephone: "",
        professional: "",
        images: "",
      },
      dialogVisible: false,
      queryMsg: {
        key: {
          userId: 1,
        },
        pageSize: 999,
        pageNum: 1,
      },
      queryGoodsHelp: {
        key: {
          userId: null,
          createdUserId: null,
        },
        pageSize: 999,
        pageNum: 1,
      },
      queryLostFound: {
        key: {
          userId: null,
        },
        pageSize: 999,
        pageNum: 1,
      },
      queryLearnDatum: {
        key: {
          userId: null,
        },
        pageSize: 999,
        pageNum: 1,
      },
      queryErrand: {
        key: {
          userId: null,
          receiverUsersId: null,
        },
        pageSize: 999,
        pageNum: 1,
      },
      msgData: [],
      goodsHelpData: [],
      lostFoundData: [],
      learnDatumData: [],
      errandData: [],
    };
  },
  watch: {
    "$route.query.index": function () {
      console.log(this.$route.query.index);
      if (
        this.$route.query.index == null ||
        this.$route.query.index == undefined
      ) {
        this.isIndex = 0;
        return;
      }
      this.isIndex = this.$route.query.index;
    },
    isIndex() {
      if (this.isIndex == 0) {
        this.getMessageList();
      }
      if (this.isIndex == 1) {
        if (this.isHelpIndex == 0) {
          this.queryGoodsHelp.key.userId = window.localStorage.getItem("id");
          this.queryGoodsHelp.key.createdUserId = null;
        } else {
          this.queryGoodsHelp.key.userId = null;
          this.queryGoodsHelp.key.createdUserId =
            window.localStorage.getItem("id");
        }
        this.getGoodsHelpList();
      }
      if (this.isIndex == 2) {
        this.getLostFoundList();
      }
      if (this.isIndex == 3) {
        this.getLearnDatumList();
      }
      if (this.isIndex == 4) {
        if (this.isLostFoundIndex == 0) {
          this.queryErrand.key.userId = window.localStorage.getItem("id");
          this.queryErrand.key.receiverUsersId = null;
        } else {
          this.queryErrand.key.userId = null;
          this.queryErrand.key.receiverUsersId =
            window.localStorage.getItem("id");
        }
        this.getErrandList();
      }
    },
  },
  created() {
    // 判断是否登录，没有登录打回到首页
    if (
      window.localStorage.getItem("id") == "" ||
      window.localStorage.getItem("id") == null
    ) {
      return this.$router.push("/");
    }

    this.info.id = window.localStorage.getItem("id");
    this.info.userNo = window.localStorage.getItem("userNo");
    this.info.userName = window.localStorage.getItem("userName");
    this.info.role = window.localStorage.getItem("role");
    this.info.professional = window.localStorage.getItem("professional");
    this.info.classes = window.localStorage.getItem("classes");
    this.info.telephone = window.localStorage.getItem("telephone");
    this.info.password = window.localStorage.getItem("password");
    this.info.imagesUrl = window.localStorage.getItem("images");
    this.getMessageList();
    if (
      this.$route.query.index == null ||
      this.$route.query.index == undefined
    ) {
      this.isIndex = 0;
      return;
    }
    this.isIndex = this.$route.query.index;
  },
  mounted() {},
  methods: {
    // 上传图片
    async imgUpload(e) {
      console.log(5555);
      var fm = new FormData();
      fm.append("coverFile", e.file);
      let { data: res } = await uploadImageUser(fm);
      console.log(res);
      this.info.images = res.data.images;
    },
    // 上传图片 成功的回调
    handleAvatarSuccess(res, file) {
      console.log(file);
      this.info.imagesUrl = URL.createObjectURL(file.raw);
    },
    // 点击互助物品 二级tab
    clickTabHelp(e, i) {
      this.isHelpIndex = i;
      console.log(e);
      if (this.isHelpIndex == 0) {
        this.queryGoodsHelp.key.userId = window.localStorage.getItem("id");
        this.queryGoodsHelp.key.createdUserId = null;
      } else {
        this.queryGoodsHelp.key.userId = null;
        this.queryGoodsHelp.key.createdUserId =
          window.localStorage.getItem("id");
      }
      this.getGoodsHelpList();
    },

    clickTabLostFound(e, i) {
      this.isLostFoundIndex = i;
      if (this.isLostFoundIndex == 0) {
        this.queryErrand.key.userId = window.localStorage.getItem("id");
        this.queryErrand.key.receiverUsersId = null;
      } else {
        this.queryErrand.key.userId = null;
        this.queryErrand.key.receiverUsersId =
          window.localStorage.getItem("id");
      }
      this.getErrandList();
    },
    // 修改个人数据
    async getGoodsHelpEdit() {
      let { data: res } = await getGoodsHelpEdit(this.info);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.dialogVisible = false;
      window.localStorage.setItem("userNo", this.info.userNo);
      window.localStorage.setItem("userName", this.info.userName);
      window.localStorage.setItem("professional", this.info.professional);
      window.localStorage.setItem("classes", this.info.classes);
      window.localStorage.setItem("password", this.info.password);
      window.localStorage.setItem("images", this.info.imagesUrl);
      this.$store.commit("getImageTab", window.localStorage.getItem("images"));
      return this.$message.success(res.msg);
    },
    // 获取留言数据 msg
    async getMessageList() {
      this.queryMsg.key.userId = window.localStorage.getItem("id");
      let { data: res } = await getMessageList(this.queryMsg);
      console.log(res);
      this.msgData = res.data.list;
    },
    // 获取留言数据 msg
    async getGoodsHelpList() {
      let { data: res } = await getGoodsHelpList(this.queryGoodsHelp);
      console.log(res);
      this.goodsHelpData = res.data.list;
    },

    // 获取我发布的失物招领
    async getLostFoundList() {
      this.queryLostFound.key.userId = window.localStorage.getItem("id");
      let { data: res } = await getLostFoundList(this.queryLostFound);
      console.log(res);
      this.lostFoundData = res.data.list;
    },

    // 获取我上传的资源
    async getLearnDatumList() {
      this.queryLearnDatum.key.userId = window.localStorage.getItem("id");
      let { data: res } = await getLearnDatumList(this.queryLearnDatum);
      console.log(res);
      this.learnDatumData = res.data.list;
    },
    // 获取帮啦数据
    async getErrandList() {
      let { data: res } = await getErrandList(this.queryErrand);
      this.errandData = res.data.list;
    },
    // 完成帮啦任务
    clickSubmitTask(e) {
      this.$confirm("任务完成是否已完成?", "提示", {
        confirmButtonText: "是的",
        cancelButtonText: "还没",
        type: "warning",
      })
        .then(async () => {
          let data = {
            id: e.id,
            status: 2,
          };
          let { data: res } = await getErrandEdit(data);
          if (res.status != 2000) {
            return;
          }
          this.$message.success("任务完成提交成功");
          this.getErrandList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.individualCenter {
  min-height: calc(100vh - 272px);
  background-color: #f9f9fa;
  .main {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding: 50px 0;
    .col_tab {
      width: 182px;
      margin-right: 24px;

      .tab_box {
        background-color: #fff;
        padding: 36px 12px;
        border-radius: 12px;

        .title {
          margin-bottom: 24px;
          text-align: center;
          .img_box {
            border-radius: 50%;
            margin: 0 auto;
            overflow: hidden;
            height: 80px;
            width: 80px;
            border: 1px solid #999;
            margin-bottom: 8px;
            position: relative;
            cursor: pointer;
            .mod {
              height: 28px;
              width: 100%;
              background-color: #0000007e;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              bottom: 0;
              left: 0;
              display: none;
              span {
                font-size: 12px;
                color: #fff;
              }
            }
            &:hover {
              .mod {
                display: flex;
              }
            }
          }
          .name {
            font-size: 18px;
          }
        }
        & > ul {
          margin-bottom: 12px;
          width: 100%;
          & > li {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            border-radius: 6px;
            padding: 8px 0;
            cursor: pointer;
            span {
              margin-left: 12px;
            }
          }
          & > li:hover {
            background-color: #0166b6;
            span {
              color: #fff;
            }
            i {
              color: #fff;
            }
          }
          .is_active {
            background-color: #0166b6;
            span {
              color: #fff;
            }
            i {
              color: #fff;
            }
          }
        }
      }
    }
    .col_content {
      width: 994px;
    }
    .msg_box {
      background-color: #fff;
      border-radius: 12px;
      .msg_main {
        padding: 24px 0;
        margin: 0 24px;
        border-bottom: 1px solid #eee;
        .me_msg,
        .admin_msg {
          margin-bottom: 24px;
          & > span {
            font-size: 16px;
            font-weight: 700;
          }
          .text {
            margin-top: 12px;
            line-height: 1.5;
            margin-bottom: 8px;
          }
          .time {
            font-size: 14px;
            color: #999;
          }
        }
        .admin_msg {
          margin-bottom: 0;
        }
      }
    }
    .help_box {
      .tab_help {
        background-color: #fff;
        border-radius: 12px;
        margin-bottom: 24px;
        display: flex;
        padding: 24px;
        & > li {
          margin-right: 12px;
          position: relative;
          cursor: pointer;
          i {
            position: absolute;
            left: 50%;
            bottom: -8px;
            transform: translate(-50%, 0%);
            height: 2px;
            width: 50%;
            background-color: #0166b6;
          }
        }
      }
      .help_main {
        width: 100%;
        background-color: #fff;
        border-radius: 12px;
        padding: 24px;
        ul {
          li {
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            // align-items: center;
            .img_box {
              width: 80px;
              margin-right: 12px;
            }
            .text_box {
              flex: 1;

              .help_title {
                margin-bottom: 8px;
              }
              .help_content {
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
                font-size: 14px;
                line-height: 1.5;
              }
            }
            .name_box {
              margin-left: 12px;
              padding-left: 12px;
              border-left: 1px solid #c1c1c3;
              width: 146px;
              text-align: right;
              .help_name {
                margin-bottom: 8px;
              }
              .help_tel {
                margin-bottom: 8px;
                font-size: 14px;
              }
              .help_time {
                font-size: 14px;
                color: #999;
              }
            }
          }
          & > li:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    .lost_box {
      background-color: #fff;
      border-radius: 12px;
      padding: 24px;
      .lost_title {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 700;
      }
      .lost_content {
        ul {
          li {
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            // align-items: center;
            .img_box {
              width: 80px;
              margin-right: 12px;
            }
            .text_box {
              flex: 1;
              margin-right: 24px;
              .help_title {
                margin-bottom: 8px;
              }
              .help_content {
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 14px;
                line-height: 1.5;
              }
            }
            .name_box {
              width: 120px;
              .help_name {
                margin-bottom: 8px;
              }
              .help_tel {
                margin-bottom: 8px;
                font-size: 14px;
              }
              .help_time {
                font-size: 14px;
                color: #999;
              }
            }
          }
        }
      }
    }
    .learn_box {
      background-color: #fff;
      border-radius: 12px;
      padding: 24px;
      .learn_title {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 700;
      }
      .learn_content {
        ul {
          li {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding: 24px 0;
            .text_box {
              flex: 1;
              .help_title {
                cursor: pointer;
              }
            }
            .name_box {
              width: 134px;
              .help_name {
                margin-bottom: 8px;
              }
              .help_tel {
                margin-bottom: 8px;
                font-size: 14px;
              }
              .help_time {
                font-size: 14px;
                color: #999;
              }
            }
          }
        }
      }
    }
    .errand_box {
      .tab_errand {
        background-color: #fff;
        border-radius: 12px;
        margin-bottom: 24px;
        display: flex;
        padding: 24px;
        & > li {
          margin-right: 12px;
          position: relative;
          cursor: pointer;
          i {
            position: absolute;
            left: 50%;
            bottom: -8px;
            transform: translate(-50%, 0%);
            height: 2px;
            width: 50%;
            background-color: #0166b6;
          }
        }
      }
      .errand_main {
        width: 100%;
        background-color: #fff;
        border-radius: 12px;
        padding: 24px;
        ul {
          li {
            padding: 0 12px;
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid #eee;
            .col_title {
              position: relative;
              margin-bottom: 24px;
              span {
                font-size: 28px;
                font-weight: 700;
                background-color: #fff;
                display: inline-block;
                padding: 0 12px;
                margin-left: 50px;
                z-index: 1;
                position: relative;
              }
              i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 1px;
                background-color: #999;
              }
            }
            .name_time_tel {
              margin-bottom: 24px;
              & > span {
                display: inline-block;
                padding: 0 5px;
                background-color: #999;
                // margin: 0 12px;
                margin-right: 24px;
                color: #fff;
              }
              & > span:last-child {
                background-color: #fff;
              }
            }
            .col_content {
              font-size: 18px;
              margin-bottom: 24px;
            }
            .btn {
            }
          }
          & > li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
          }
        }
      }
    }
  }

  .dia_box {
    padding: 24px;
    padding-bottom: 0;
    padding-top: 0;
    /deep/ .el-upload-dragger {
      width: 340px;
      height: 170px;
    }
    .upload-demo {
      margin-bottom: 0.8rem;
    }
  }
  /deep/.el-dialog__body {
    padding-bottom: 0;
  }
  .img_kong {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    & > img {
      width: 350px;
    }
    .test_kong {
      font-size: 20px;
      margin-top: 12px;
    }
  }
}
</style>
